<template>
  <view class="home">
    <view class="swiper">
      <swiper :indicator-dots="true"
        :autoplay="true" :interval="3000" :duration="1000" circular>
        <swiper-item v-for="(item, index) in movieList.slice(0, 5)" :key="index">				
          <view class="swiper-item">
            <image :src="item.img" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="list">
      <view class="section-title">
        <view class="line"></view>
        <text>热映电影</text>
      </view>
      <view class="item" 
            v-for="(movie, index) in movieList" 
            :key="index"
            @tap="goToDetail(movie.id)">
        <view class="pic">
          <image :src="movie.img" mode="aspectFill"></image>
        </view>
        <view class="content">
          <view class="name">{{movie.nm}}</view>
          <view class="cat">{{movie.cat}}</view>
          <view class="dir">导演：{{movie.dir}}</view>
          <!-- <view class="msg">{{movie.desc}}</view> -->
          <view class="act">主演：{{movie.star}}</view>
          <view class="showtime">上映时间：{{movie.rt}}</view>
          <view class="info2">
            <view class="sc">评分：{{movie.sc}}</view>
            <view class="wish">{{movie.wish}}人想看</view>
          </view>
        </view>
      </view>			 
      
      <view class="loading-text" v-if="loading">正在加载...</view>
      <view class="loading-text" v-if="!hasMore && !loading">没有更多数据了</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CONFIG } from '../../utils/config'
import { onReachBottom } from '@dcloudio/uni-app'

const movieList = ref([])
const loading = ref(false)
const hasMore = ref(true)

// 跳转到详情页
function goToDetail(movieId) {
  uni.navigateTo({
    url: `/pages/details/details?id=${movieId}`
  })
}

// 分页数据
const pageData = {
  page: 1,
  pageSize: 10
}

async function getMovieList() {
  if (loading.value) return
  loading.value = true
  
  try {
    const res = await uni.$get(CONFIG.movie_url, {
      limit: pageData.pageSize,
      offset: (pageData.page - 1) * pageData.pageSize,
      ct: '西安'
    })
    
    if (res.statusCode === 200 && res.data.data.hot) {
      // 合并数据
      movieList.value = [...movieList.value, ...res.data.data.hot]
      // 更新是否有更多数据
      hasMore.value = res.data.data.paging.hasMore
      console.log('当前电影数据：', movieList.value)
    }
  } catch (error) {
    // console.error('获取电影列表失败：', error)
  } finally {
    loading.value = false
  }
}

// 监听触底事件
onReachBottom(() => {
  console.log("触底加载更多")
  if (hasMore.value && !loading.value) {
    pageData.page++
    getMovieList()
  }
})

onMounted(() => {
  getMovieList()
})
</script>

<style lang="scss" scoped>
.home {
  padding: 10px;
  
  .swiper {
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #000;
    
    swiper {
      width: 100%;
      height: 100%;
    }
    
    .swiper-item {
      width: 100%;
      height: 100%;
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  
  .list {
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      
      .line {
        width: 4px;
        height: 16px;
        background-color: #ff2756;
        border-radius: 2px;
        margin-right: 8px;
      }
      
      text {
        font-size: 18px;
        font-weight: bold;
        color: #ff2756;
      }
    }
    
    .item {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      padding: 10px;
      background: #fff;
      border-radius: 12px;
      border: 1px solid #000;
      box-shadow: none;
      
      .pic {
        width: 120px;
        height: 160px;
        border-radius: 8px;
        overflow: hidden;
        
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        
        .name {
          font-size: 18px;
          font-weight: bold;
          color: #ff2756;
        }
        
        .cat, .dir, .act, .showtime {
          font-size: 14px;
          color: #666;
        }
        
        .info2 {
          display: flex;
          gap: 15px;
          margin-top: auto;
          
          .sc {
            color: #ff2756;
            font-weight: bold;
          }
          
          .wish {
            color: #999;
          }
        }
      }
    }
  }
  
  .loading-text {
    text-align: center;
    padding: 20px 0;
    color: #999;
    font-size: 14px;
  }
}
</style>